var carousel = $("ul"),
	carousel_box = $(".carousel_box"),
	left_arrow = $(".left_arrow"),
	right_arrow = $(".right_arrow"),
	controls_box = $("#controls_box"),
	controls = $(".controls_li"),
	carousel_details = $("ul li"),
	select_box = $("#select_box"),
	now_index = 0,
	last_index = 0,
	is_run = false,
	timer,
	new_li;

// 动态获取图片(根据下拉框)

select_box.on("change", function() {
	now_index = 0;
	last_index = 0;
	add_img(this.value);
})

function add_img(options) {
	$.ajax({
		type: "get",
		url: "http://build.bluej.cn/api/index/get_carousel/position_id/" + options,
		async: false,
		success: function(res) {
			carousel.html("");
			controls_box.html("");
			for(var i = 0; i < res.data.length; i++) {
				carousel.append("<li><img src='http://build.bluej.cn" + res.data[i].ch_img_url + "'/></li>");
				carousel_details = $("ul li");
			}

			carousel_details.each(function() {
				var li = document.createElement("li");
				li.setAttribute("class", "controls_li");
				controls_box.append(li);
				controls = $(".controls_li");
			})

			//圆点控制之闭包
			controls.each(function(i) {
				(function(j) {
					controls.eq(j).on("mouseover", function() {
						if(last_index != j) {
							now_index = j;
							run(j);
						}
					})
				})(i)
			})

		}
	})
}
add_img(1);
controls.eq(0).addClass('active');

//右箭头
right_arrow.on('click', function() {
	if(!is_run) {
		is_run = true;
		if(++now_index >= carousel_details.length) {
			right_run(now_index);
		} else {
			run(now_index);
		}
	}
})

//左箭头点击事件
left_arrow.on("click", function() {
	if(!is_run) {
		is_run = true;
		if(--now_index < 0) {
			left_run(now_index);
		} else {
			run(now_index);
		}
	}
})

//轮播图运行主函数
function run(target_index) {
	carousel.css("transform", "translateX(-" + target_index * 100 + "%)");
	controls.eq(last_index).removeClass("active");
	last_index = target_index;
	controls.eq(target_index).addClass("active");
	carousel.on("transitionend", function() {
		is_run = false;
	})
}

// 右边边界轮播函数
function right_run(target_index) {
	new_li = carousel_details.eq(0).clone();
	carousel.append(new_li);
	carousel.css("transform", "translateX(-" + target_index * 100 + "%)");
	carousel.on("transitionend", right_run_end);
	controls.eq(last_index).removeClass("active");
	last_index = 0;
	now_index = 0;
	controls.eq(now_index).addClass("active");

	function right_run_end() {
		carousel.css("transition", "none");
		carousel.css("MozTransition", "none");
		carousel.css("transform", "translateX(0%)");
		carousel.currentStyle ? console.dir(carousel.currentStyle) : carousel.css("transform");
		carousel.css("transition", "");
		new_li.remove();
		carousel.off("transitionend", right_run_end);
	}
}

function left_run(target_index) {
	new_li = carousel_details.eq(carousel_details.length - 1).clone();
	new_li.insertBefore(carousel_details.eq(0));
	carousel.css("transition", "none");
	carousel.css("transform", "translateX(-100%)");
	carousel.currentStyle ? console.dir(carousel.currentStyle) : carousel.css("transform");
	carousel.css("transition", "");
	carousel.css("transform", "translateX(0%)");
	carousel.on("transitionend", left_run_end);
	controls.eq(last_index).removeClass("active");
	last_index = carousel_details.length - 1;
	now_index = carousel_details.length - 1;
	controls.eq(now_index).addClass("active");

	function left_run_end() {
		carousel.css("transition", "none");
		new_li.remove();
		carousel.css("transform", "translateX(-" + (carousel_details.length - 1) + "00%)");
		carousel.currentStyle ? console.dir(carousel.currentStyle) : carousel.css("transform");
		carousel.css("transition", "");
		is_run = false;
		carousel.off("transitionend", left_run_end);
	}
}

// 定时轮播
function auto() {
	timer = setInterval(function() {
		if(++now_index >= carousel_details.length) {
			right_run(now_index);
		} else {
			run(now_index);
		}
	}, 2000);
};
auto();

carousel_box.on("mouseover", function() {
	clearInterval(timer);
});
carousel_box.on("mouseout", function() {
	auto();
})